import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { PageHeader } from '@ant-design/pro-layout'//需要安装@ant-design/pro-components，可以参考antd官网
import { Card, Col, List, Row } from 'antd'
import _ from 'lodash';//对数组进行分组输出



function News() {
    const [list, setlist] = useState([])
    useEffect(() => {
        axios.get(`/news?publishState=2&_expand=category`).then((res) => {
            setlist(Object.entries(_.groupBy(res.data, item => item.category.title)));
        })
    }, [])

    return (
        <div style={{
            width: "99%",
            padding: "10px 10px",
            overflow: "hidden",
            margin: "0 auto"
        }}>
            <PageHeader
                title="全球新闻"
                subTitle="查看新闻"
                style={{
                    display: "flex",
                    alignItems: "center"
                }}
            />
            <Row
                gutter={[16, 16]}
                style={{ marginTop: "20px" }}
            >
                {
                    list.map(item => {
                        return <Col span={8} key={item[0]}>
                            <Card
                                title={item[0]}
                                bordered={true}
                                hoverable={true}
                            >
                                <List
                                    size='small'
                                    pagination={{
                                        pageSize: 3
                                    }}
                                    dataSource={item[1]}
                                    renderItem={data => <List.Item><a href={`#/detail/${data.id}`}>{data.title}</a></List.Item>}
                                />
                            </Card>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}

export default News